var classCallCheck = function(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

var createClass = function() {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  return function(Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();

var Selects = function() {
  function Selects(container, options) {
    classCallCheck(this, Selects);

    this.id = container;
    this.data = options.data;
    this.columns = options.columns;
    this.value = options.value || ["110000", "110100", "110101"];
    this.uuid = Math.random().toString(36).substring(3, 8);
    this.scroller = [];
    this.init();
  }

  createClass(Selects, [{
    key: "init",
    value: function init() {
      this.layout();
      this.computed();
      this.render(this.data, this.value);
    }
  }, {
    key: "layout",
    value: function layout() {
      var html = '<div class="picker">' + '<div class="popup-picker-header"><div class="flexbox flex-row"><div class="flexbox-item btn__cancel">取消</div><div class="flexbox-item"></div><div class="flexbox-item btn__complete"> 完成</div></div></div>' + '<div class="flexbox flex-row">';
      for (var i = 0; i < this.columns; i++) {
        html += '<div class="flexbox-item"><div class="picker-item" id="picker-' + this.uuid + '-' + i + '"></div></div>';
      }
      html += '</div></div>';
      document.querySelector(this.id).innerHTML = html;
    }
  }, {
    key: "computed",
    value: function computed() {
      if (this.columns !== 0) {
        var length = this.columns;
        this.store = new Manager(this.data, length);
        this.data = this.store.getColumns(this.value);
      }
    }
  }, {
    key: "getId",
    value: function getId(i) {
      return '#picker-' + this.uuid + '-' + i;
    }
  }, {
    key: "render",
    value: function render(data, value) {
      this.count = this.data.length;
      var _this = this;
      if (!data || !data.length) {
        return;
      }
      var count = this.data.length;

      // set first item as value
      if (value.length < count) {
        for (var i = 0; i < count; i++) {
          _this.value[i] = data[i][0].value || data[i][0];
        }
      }

      var _loop = function _loop(_i) {
        _this.scroller[_i] = new Scroller(_this.getId(_i), {
          data: data[_i],
          defaultValue: value[_i] || data[_i][0].value,
          onSelect: function onSelect(value) {
            var selected = document.querySelectorAll('.scroller-item-selected');
            _this.value[_i] = value;
            if (_this.columns !== 0) {
              _this.renderChain(_i + 1);
            }
          }
        });
        if (_this.value) {
          _this.scroller[_i].select(value[_i]);
        }
      };

      for (var _i = 0; _i < data.length; _i++) {
        _loop(_i);
      }
    }
  }, {
    key: "getValue",
    value: function getValue() {
      var data = [];
      for (var i = 0; i < this.data.length; i++) {
        data.push(this.scroller[i].value);
      }
      return data;
    }
  }, {
    key: "renderChain",
    value: function renderChain(i) {
      if (this.columns === 0) {
        return;
      }
      // do not render for last scroller
      if (i > this.count - 1) {
        return;
      }
      var _this = this;
      var ID = this.getId(i);
      var list = this.store.getChildren(_this.getValue()[i - 1]);
      this.scroller[i] = new Scroller(ID, {
        data: list,
        onSelect: function onSelect(value) {
          _this.value[i] = value;
          _this.getValue();
          _this.renderChain(i + 1);
        }
      });
      this.value[i] = list[0].value;
      this.renderChain(i + 1);
    }
  }]);
  return Selects;
}();
